<template>
  <div>
    <h3>自定义指令案例</h3>
    <!-- <input type="text" placeholder="请输入..." />
    <input v-focus type="text" placeholder="请输入..." />
    <hr /> -->

    <div v-hover="{ backgroundColor: 'green', color: 'white' }" class="box">
      据说我是一个盒子
    </div>
    <hr />

    <!-- <button @click="onBtnClick">请暴力点我，伦家狠喜欢</button> -->
    <!-- <button v-throttle:click="{ fn: onBtnClick, delay: 3000 }">
      请暴力点我，伦家狠喜欢
    </button>
    <hr /> -->

    <!-- <input type="text" @input="onInput" :value="userInput" /> -->
    <input
      type="text"
      v-debounce:input="{ handler: onInput, delay: 3000 }"
      :value="userInput"
    />
    <p>userInput {{ userInput }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const userInput = ref("");

const onBtnClick = (e) => console.log("onBtnClick");
const onInput = (e) => {
  console.log("onInput");
  userInput.value = e.target.value;
};
</script>

<style lang="scss" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: gray;
  color: black;
}
</style>
